<script setup lang="ts">
import { computed } from "vue";

const props = defineProps<{
  bgColor: string;
  size: number | [number] | [number, number];
}>();

const sheet = computed(() => {
  const { bgColor, size } = props;

  const [w, h = w] = Array.isArray(size) ? size : [size];

  const style = {};

  if (bgColor) style["background"] = bgColor;

  if (size) {
    style["width"] = w + "rpx";
    style["height"] = h + "rpx";
  }

  return style;
});
</script>

<template>
  <view class="rounded-full flex-center" :style="sheet">
    <slot />
  </view>
</template>
